<template>
  <div>
    <div class="preloader loaded">
      <div class="preloader-body">
        <div class="cssload-container">
          <div class="cssload-speeding-wheel"></div>
        </div>
        <p>Loading...</p>
      </div>
    </div>
    <!-- Page-->
    <div  class="page text-center animated">
      <!-- Page Header-->
      <!-- RD Navbar-->
      <header class="page-header " >
        <div class="rd-navbar-wrap" style="height: 0px;">
          <nav class="rd-navbar rd-navbar-fullwidth-variant-1 rd-navbar-original rd-navbar-fixed" data-layout="rd-navbar-fixed"
            data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-fixed"
            data-xl-layout="rd-navbar-static" data-stick-up-offset="51">
            <div class="rd-navbar-toppanel">
              <div class="rd-navbar-toppanel-inner">
                <div class="rd-navbar-toppanel-submenu"><a class="rd-navbar-toppanel-submenu-toggle" href="#"
                    data-rd-navbar-toggle=".rd-navbar-toppanel-submenu"></a>
                  <ul>
                    <li><a href="#">Orders</a></li>
                    <li><a href="#">Compare</a></li>
                    <li><a href="#">Wishlist</a></li>
                    <li><a href="#">My Account</a></li>
                  </ul>
                </div>
                <div class="rd-navbar-toppanel-wrapper">
                  <div class="rd-navbar-contact-info">
                    <p class="text-black text-medium">Call us: <a class='text-black navbar-contact-link'
                        href='tel:#'>+3(800) 2345-6789</a> <span class=' text-light font-italic'>7 Days a week from 9:00
                        am to 7:00 pm</span></p>
                  </div>
                  <div class="rd-navbar-toppanel-search">
                    <!-- RD Navbar Search-->
                    <div class="rd-navbar-search-wrap">
                      <div class="rd-navbar-search">
                        <form class="rd-search rd-navbar-search-form" action="search-results.html"
                          data-search-live="rd-search-results-live" method="GET">
                          <label class="rd-navbar-search-form-input">
                            <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input"
                              type="text" name="s" autocomplete="off" placeholder="Search...">
                          </label>
                          <button class="rd-navbar-search-form-submit" type="submit"></button>
                          <div class="rd-navbar-search-toggle" data-rd-navbar-toggle=".rd-navbar-search"></div>
                        </form><span class="rd-navbar-live-search-results"></span>
                      </div>
                    </div>
                  </div>
                  <div class="rd-navbar-currency">
                    <select class="form-input select" name="find-job-location"
                      data-minimum-results-for-search="Infinity">
                      <option value="1">$</option>
                      <option value="2">€</option>
                    </select>
                  </div>
                  <div class="rd-navbar-lang">
                    <select class="form-input select" name="find-job-location"
                      data-minimum-results-for-search="Infinity">
                      <option value="1">USD</option>
                      <option value="2">EUR</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="rd-navbar-inner">
              <!-- RD Navbar Panel-->
              <div class="rd-navbar-panel">
                <!-- RD Navbar Toggle-->
                <button class="rd-navbar-toggle toggle-original " :class="isActiveLeft==true?'active':''" @click="ActiveLeft" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                <!-- RD Navbar Brand-->
                <div class="rd-navbar-brand"><a class="brand-name" href="./"><img alt=""
                      src="@/assets/images/logo.png"></a></div>
                <div class="rd-navbar-elements-wrap text-right">
                  <ul class="rd-navbar-socials elements-group-18 text-middle d-inline-flex">
                    <li><a class="text-gray icon icon-xs fa-facebook" href="#"></a></li>
                    <li><a class="text-gray icon icon-xs fa-twitter" href="#"></a></li>
                    <li><a class="text-gray icon icon-xs fa-google-plus" href="#"></a></li>
                    <li><a class="text-gray icon icon-xs fa-linkedin" href="#"></a></li>
                    <li><a class="text-gray icon icon-xs fa-pinterest" href="#"></a></li>
                  </ul>
                  <div class="rd-navbar-shop text-middle text-left">
                    <div class="rd-navbar-shop-toggle"><a
                        class="text-middle icon icon-primary fl-line-icon-set-shopping63" href="#"
                        data-rd-navbar-toggle=".rd-navbar-shop"></a><span
                        class="text-middle badge label-circle label-primary label">1</span></div>
                    <div class="rd-navbar-shop-panel">
                      <h4>My Cart</h4>
                      <div class="unit unit-spacing-15 flex-row rd-navbar-shop-product">
                        <div class="unit-left"><a class="text-dark" href="single-product.html"><img alt=""
                              src="@/assets/images/header-01.jpg"></a></div>
                        <div class="unit-body"><a class="text-dark" href="single-product.html">Agrafe earrings</a>
                          <p class="offset-top-0">4 x <span
                              class="big text-regular text-primary text-spacing-40">$258.89</span></p><a href="#"><span
                              class="rd-navbar-shop-product-delete icon mdi mdi-close"></span></a>
                        </div>
                      </div>
                      <hr class="divider divider-gray divider-offset-20">
                      <h4>Subtotal: <span class="text-regular text-primary text-normal text-spacing-40">$1,035.56</span>
                      </h4><a class="btn btn-block btn-default" href="cart.html">VIEW CART</a><a
                        class="btn btn-block btn-primary" href="checkout.html">CHECKOUT</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="rd-navbar-nav-wrap " :class="isActiveLeft==true?'active':''">
                <!-- RD Navbar Nav-->
                <ul class="rd-navbar-nav">
                  <li class="active"><a href="./">home</a></li>
                  <li><a href="#about">pages</a>
                    <!-- RD Navbar Dropdown-->
                    <ul class="rd-navbar-dropdown">
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="404.html">404</a></li>
                      <li><a href="#">Post formats</a>
                        <ul class="rd-navbar-dropdown">
                          <li><a href="post-gallery.html">Gallery Format</a></li>
                          <li><a href="post-audio.html">Audio Format</a></li>
                          <li><a href="post-video.html">Video Format</a></li>
                          <li><a href="post-quote.html">Quote Format</a></li>
                          <li><a href="post-link.html">Link Format</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Header style</a>
                        <ul class="rd-navbar-dropdown">
                          <li><a href="header-variant-1.html">Header style 1</a></li>
                          <li><a href="header-variant-2.html">Header style 2</a></li>
                          <li><a href="header-variant-3.html">Header style 3</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Footer style</a>
                        <ul class="rd-navbar-dropdown">
                          <li><a href="footer-variant-1.html">Footer style 1</a></li>
                          <li><a href="footer-variant-2.html">Footer style 2</a></li>
                          <li><a href="footer-variant-3.html">Footer style 3</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sidebar style</a>
                        <ul class="rd-navbar-dropdown">
                          <li><a href="sidebar-left.html">Sidebar left</a></li>
                          <li><a href="sidebar-right.html">Sidebar right</a></li>
                          <li><a href="sidebar-none.html">No sidebar</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li><a href="products.html">Products</a>
                    <ul class="rd-navbar-dropdown">
                      <li><a href="ecwid-shop.html">Ecwid Shop</a></li>
                      <li><a href="single-product.html">Single Product</a></li>
                      <li><a href="cart.html">Cart</a></li>
                      <li><a href="checkout.html">Checkout</a></li>
                      <li><a href="category.html">Category</a></li>
                    </ul>
                  </li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="#">Blog</a>
                    <ul class="rd-navbar-dropdown">
                      <li><a href="blog-masonry.html">Blog Masonry 3 cols</a></li>
                      <li><a href="blog-grid.html">Blog Grid 3 cols</a></li>
                      <li><a href="blog-list.html">Blog List</a></li>
                      <li><a href="single-blog-post.html">Single Blog Post</a></li>
                    </ul>
                  </li>
                  <li><a href="contacts.html">Contacts</a></li>
                  <li class="d-none rd-navbar-fixed--visible"><a href="cart.html">Cart</a></li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </header>
      <!-- Page Content-->
      <!-- Swiper-->
      <section class="swiper-container swiper-slider home-slider" data-slide-effect="fade" data-min-height="430px"
        data-autoplay="false">
        <div class="swiper-wrapper">
          <div class="slide-mobile-overlay swiper-slide" style="background-image:url('api/common/LocalImg/index-01.jpg');background-size: cover;" src="../static/images/index-01.jpg" data-slide-bg="../assets/images/index-01.jpg">
            <div class="swiper-slide-caption">
              <div class="container text-md-left">
                <div class="row justify-content-end">
                  <div class="col-md-7 col-md-offset-6 col-lg-5 col-lg-offset-7">
                    <hr class="divider divider-primary divider-sm-left divider-bold" data-caption-animate="fadeInLeft">
                    <h1 class="offset-top-30" data-caption-delay="100" data-caption-animate="fadeInUp">Turquoise</h1>
                    <h2 data-caption-delay="600" data-caption-animate="fadeInUp">Exclusive Jewelry</h2><a
                      class="offset-top-45 btn btn-primary" href="category.html" data-caption-delay="900"
                      data-caption-animate="fadeInUp">Shop now!</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-position-left bg-position-center slide-mobile-overlay swiper-slide"
            data-slide-bg="@/assets/images/index-02.jpg">
            <div class="swiper-slide-caption text-md-left">
              <div class="container">
                <hr class="divider-sm-left divider divider-base divider-bold" data-caption-animate="fadeInDown">
                <h1 class="offset-top-30" data-caption-delay="300" data-caption-animate="fadeInUp">Luxury Jewelry</h1>
                <h2 data-caption-delay="300" data-caption-animate="fadeInUp">The Best Collections</h2><a
                  class="offset-top-45 btn btn-primary" href="category.html" data-caption-delay="600"
                  data-caption-animate="fadeInUp">Shop now!</a>
              </div>
            </div>
          </div>
          <div class="bg-position-center-sm slide-mobile-overlay swiper-slide"
            data-slide-bg="@/assets/images/index-03.jpg">
            <div class="swiper-slide-caption text-md-left">
              <div class="container">
                <div class="row justify-content-end">
                  <div class="col-md-offset-6 col-md-8 col-xl-offset-5 col-xl-8">
                    <hr class="divider divider-base divider-sm-left divider-bold" data-caption-animate="fadeInLeft">
                    <h1 data-caption-delay="100" data-caption-animate="fadeInUp">#1 Jewelry Store</h1><a
                      class="offset-top-45 btn btn-primary" data-caption-delay="600" data-caption-animate="fadeInUp"
                      href="category.html">Shop now!</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Swiper Navigation-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- Swiper Pagination-->
        <div class="swiper-pagination"></div>
      </section>
      <section class="section-top-60">
        <div class="container">
          <div class="row row-30">
            <div class="col-lg-4 col-md-6 col-sm-6 col-12"><a class="thumbnail-variant-4 d-inline-block"
                href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-04.jpg" width="370"
                  height="670"></a></div>
            <div class="col-lg-4 col-md-6 order-lg-1 col-sm-6 col-12"><a class="thumbnail-variant-4 d-inline-block"
                href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-07.jpg" width="370"
                  height="670"></a></div>
            <div class="col-lg-4">
              <div class="row row-30">
                <div class="col-md-6 col-lg-12 col-sm-6 col-12"><a
                    class="thumbnail-variant-4 d-inline-block inset-lg-bottom-7-p" href="category.html"><img
                      class="img-responsive" alt="" src="@/assets/images/index-05.jpg" width="370" height="320"></a>
                </div>
                <div class="col-md-6 col-lg-12 col-sm-6 col-12"><a class="thumbnail-variant-4 d-inline-block"
                    href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-06.jpg"
                      width="370" height="320"></a></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section-top-60">
        <div class="container">
          <h3>Browse Our Categories</h3>
          <hr class="divider divider-base divider-bold">
          <div class="row offset-top-30">
            <div class="col-lg-3 col-sm-6"><a class="thumbnail-variant-1" href="category.html"><img
                  class="img-responsive" alt="" src="@/assets/images/index-08.jpg" width="270" height="363">
                <div class="caption">
                  <h5 class="caption-title">Earrings</h5>
                  <p class="caption-descr">125 products</p>
                </div>
              </a></div>
            <div class="offset-top-30 offset-xs-top-0 col-lg-3 col-sm-6"><a class="thumbnail-variant-1"
                href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-09.jpg" width="270"
                  height="363">
                <div class="caption">
                  <h5 class="caption-title">necklaces</h5>
                  <p class="caption-descr">546 products</p>
                </div>
              </a></div>
            <div class="offset-top-30 offset-md-top-0 col-lg-3 col-sm-6"><a class="thumbnail-variant-1"
                href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-10.jpg" width="270"
                  height="363">
                <div class="caption">
                  <h5 class="caption-title">brooches</h5>
                  <p class="caption-descr">25 products</p>
                </div>
              </a></div>
            <div class="offset-top-30 offset-md-top-0 col-lg-3 col-sm-6"><a class="thumbnail-variant-1"
                href="category.html"><img class="img-responsive" alt="" src="@/assets/images/index-11.jpg" width="270"
                  height="363">
                <div class="caption">
                  <h5 class="caption-title">rings</h5>
                  <p class="caption-descr">72 products</p>
                </div>
              </a></div>
          </div>
        </div>
      </section>
      <section class="section-top-60">
        <div class="container">
          <h3>Weekly Featured Products</h3>
          <hr class="divider divider-base divider-bold">
          <!-- Owl Carousel-->
          <div class="owl-carousel offset-top-30" data-mouse-drag="false" data-autoplay="3000" data-lg-items="4"
            data-md-items="3" data-sm-items="2" data-margin="30" data-nav="true">
            <div class="product d-inline-block">
              <div class="product-media"><a href="single-product.html"><img class="img-responsive" alt=""
                    src="@/assets/images/index-12.jpg" width="290" height="389"></a>
                <div class="product-overlay"><a class="icon icon-circle icon-base fl-line-icon-set-shopping63"
                    href="single-product.html"></a></div>
                <div class="product-overlay-variant-2"><a class="label label-default" href="category.html">Featured</a>
                </div>
              </div>
              <div class="offset-top-10">
                <p class="big"><a class="text-base link-default" href="single-product.html">6-mm Round Birthstone Stud
                    Earrings</a></p>
              </div>
              <div class="product-price">$258.89</div>
              <div class="product-actions elements-group-10"><a class="icon mdi mdi-heart-outline icon-gray icon-sm"
                  href="#"></a><a class="icon mdi mdi-signal icon-gray icon-sm" href="#"></a></div>
            </div>
            <div class="product d-inline-block">
              <div class="product-media"><a href="single-product.html"><img class="img-responsive" alt=""
                    src="@/assets/images/index-13.jpg" width="290" height="389"></a>
                <div class="product-overlay"><a class="icon icon-circle icon-base fl-line-icon-set-shopping63"
                    href="single-product.html"></a></div>
                <div class="product-overlay-variant-2"><a class="label label-default" href="category.html">Featured</a>
                </div>
              </div>
              <div class="offset-top-10">
                <p class="big"><a class="text-base link-default" href="single-product.html">Love necklace (3
                    diamonds)</a></p>
              </div>
              <div class="product-price">€127.50</div>
              <div class="product-rating">
                <div><span class="icon icon-xs mdi mdi-star"></span><span class="icon icon-xs mdi mdi-star"></span><span
                    class="icon icon-xs mdi mdi-star"></span><span class="icon icon-xs mdi mdi-star"></span><span
                    class="icon icon-xs mdi mdi-star text-gray-light"></span></div>
              </div>
              <div class="product-actions elements-group-10"><a class="icon mdi mdi-heart-outline icon-gray icon-sm"
                  href="#"></a><a class="icon mdi mdi-signal icon-gray icon-sm" href="#"></a></div>
            </div>
            <div class="product d-inline-block">
              <div class="product-media"><a href="single-product.html"><img class="img-responsive" alt=""
                    src="@/assets/images/index-14.jpg" width="290" height="389"></a>
                <div class="product-overlay"><a class="icon icon-circle icon-base fl-line-icon-set-shopping63"
                    href="single-product.html"></a></div>
                <div class="product-overlay-variant-2">
                  <div><a class="label label-primary" href="category.html">Sale</a></div>
                  <!-- Countdown-->
                  <div class="countdown" data-type="until" data-demo-time="true" data-time="17 Dec 2019 16:00"
                    data-format="hms"></div>
                </div>
              </div>
              <div class="offset-top-10">
                <p class="big"><a class="text-base link-default" href="single-product.html">High Jewelry d&eacute;cor
                    pendant watch</a></p>
              </div>
              <div class="product-price">$258.89</div>
              <div class="product-actions elements-group-10"><a class="icon mdi mdi-heart-outline icon-gray icon-sm"
                  href="#"></a><a class="icon mdi mdi-signal icon-gray icon-sm" href="#"></a></div>
            </div>
            <!-- Product.center-block-->
            <div class="product d-inline-block">
              <div class="product-media"><a href="single-product.html"><img class="img-responsive" alt=""
                    src="@/assets/images/index-15.jpg" width="290" height="389"></a>
                <div class="product-overlay"><a class="icon icon-circle icon-base fl-line-icon-set-shopping63"
                    href="single-product.html"></a></div>
              </div>
              <div class="offset-top-10">
                <p class="big"><a class="text-base link-default" href="single-product.html">Amulette de Cartier ring</a>
                </p>
              </div>
              <div class="product-price">$258.89</div>
              <div class="product-rating">
                <div><span class="icon icon-xs mdi mdi-star"></span><span class="icon icon-xs mdi mdi-star"></span><span
                    class="icon icon-xs mdi mdi-star"></span><span class="icon icon-xs mdi mdi-star"></span><span
                    class="icon icon-xs mdi mdi-star text-gray-light"></span></div>
              </div>
              <div class="product-actions elements-group-10"><a class="icon mdi mdi-heart-outline icon-gray icon-sm"
                  href="#"></a><a class="icon mdi mdi-signal icon-gray icon-sm" href="#"></a></div>
            </div>
          </div>
        </div>
      </section>
      <section class="offset-top-45">
        <div class="container well-variant-1" style="background-repeat: no-repeat; background-size: cover;">
          <h3>About Our Store</h3>
          <hr class="divider divider-base divider-bold">
          <p class="text-regular text-uppercase">We are offering you the unique goods because our product is the real
            treasure.</p>
          <p class="offset-top-20">We are offering you the unique goods because our product is the real treasure. If you
            are a true fan, you’ll love it. We have a tremendous variety in comparison to all of our competitors. Our
            collection is like a sea pearl among simple stones. Our devoted clients have noticed that our goods are the
            index of true, elegant taste.</p>
          <p></p>
        </div>
      </section>
      <section class="section-top-60">
        <div class="container">
          <h3>Our Blog</h3>
          <hr class="divider divider-base divider-bold">
          <div class="owl-mobile-dots owl-nav-md owl-nav-position-top owl-carousel offset-top-30"
            data-mouse-drag="false" data-autoplay="4000" data-lg-items="3" data-md-items="2" data-sm-items="2"
            data-margin="30" data-dots="true" data-nav="true">
            <div class="blog-post blog-post-grid">
              <div class="blog-post-media"><a href="single-blog-post.html"><img class="img-responsive" width="1170"
                    height="854" alt="" src="@/assets/images/index-17.jpg">
                  <div class="blog-post-caption">
                    <div class="blog-post-meta-date"><span class='blog-post-meta-date-big reveal-block'>25</span> APR
                    </div>
                  </div>
                </a></div>
              <div class="blog-post-meta">
                <h5 class="blog-post-meta-title"><a class="text-base" href="single-blog-post.html"> Enhancing Your
                    Jewelry Collection</a></h5>
                <p><i>Posted by</i> <a href='blog-list.html'>Shane Doe</a> &#8226; <a
                    href='single-blog-post.html#comments'>25 Comments</a></p>
              </div>
              <p>Finding the very best jewelry information is not always the easiest thing to do. There is so much
                information available, sifting through irrelevant information becomes time consuming, not to mention
                discouraging. Luckily, the best jewelry tips available anywhere, are right here in this article...</p>
              <div><a class="btn btn-link" href="single-blog-post.html"><span class="btn-text">read more</span></a>
              </div>
            </div>
            <div class="blog-post blog-post-grid">
              <div class="blog-post-media"><a href="single-blog-post.html"><img class="img-responsive" width="1170"
                    height="854" alt="" src="@/assets/images/index-18.jpg">
                  <div class="blog-post-caption">
                    <div class="blog-post-meta-date"><span class='blog-post-meta-date-big reveal-block'>26</span> APR
                    </div>
                  </div>
                </a></div>
              <div class="blog-post-meta">
                <h5 class="blog-post-meta-title"><a class="text-base" href="single-blog-post.html">Wearing Jewelry
                    According to Fashion</a></h5>
                <p><i>Posted by</i> <a href='blog-list.html'>Shane Doe</a> &#8226; <a
                    href='single-blog-post.html#comments'>25 Comments</a></p>
              </div>
              <p>There is nothing that brings a smile to our face like a pretty ring, a jangly necklace, or some sparkly
                earrings. Big or small, real or fake, understated or over-the-top, jewelry lifts the spirits. It also
                lifts a look. Colorful beads or chandelier earrings could be just the thing to make an...</p>
              <div><a class="btn btn-link" href="single-blog-post.html"><span class="btn-text">read more</span></a>
              </div>
            </div>
            <div class="blog-post blog-post-grid">
              <div class="blog-post-media"><a href="single-blog-post.html"><img class="img-responsive" width="1170"
                    height="854" alt="" src="@/assets/images/index-19.jpg">
                  <div class="blog-post-caption">
                    <div class="blog-post-meta-date"><span class='blog-post-meta-date-big reveal-block'>26</span> APR
                    </div>
                  </div>
                </a></div>
              <div class="blog-post-meta">
                <h5 class="blog-post-meta-title"><a class="text-base" href="single-blog-post.html">Choosing Wedding
                    Jewelry: Top 5 Rules</a></h5>
                <p><i>Posted by</i> <a href='blog-list.html'>Shane Doe</a> &#8226; <a
                    href='single-blog-post.html#comments'>25 Comments</a></p>
              </div>
              <p>When it comes to style, we’re all for breaking the so-called “rules.” But that doesn’t mean there
                aren’t still tried-and-true tips to help you look your best, including for your wedding day jewelry. So
                if you need a little guidance when it comes to accessorizing your gown, read this article with...</p>
              <div><a class="btn btn-link" href="single-blog-post.html"><span class="btn-text">read more</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="offset-top-30 offset-md-top-0">
        <div class="container">
          <div class="bg-primary section-60">
            <!-- Owl Carousel-->
            <div class="owl-nav-center owl-mobile-dots owl-nav-md owl-carousel owl-modern" data-mouse-drag="false"
              data-items="1" data-drag="false" data-nav="true" data-dots="true">
              <blockquote class="quote quote-variant-1"><img class="rounded-circle" alt=""
                  src="@/assets/images/index-22.jpg" width="97" height="97">
                <h4 class="offset-top-20">
                  <q>&#34;Thanks a lot for the quick response. I was really impressed, your solution is excellent!! Your
                    competence is justified!!!&#34;</q>
                </h4>
                <p>
                  <cite class="text-normal">&#8212; Rebecca Smith</cite>
                </p>
              </blockquote>
              <blockquote class="quote quote-variant-1"><img class="rounded-circle" alt=""
                  src="@/assets/images/index-21.jpg" width="97" height="97">
                <h4 class="offset-top-20">
                  <q>&#34;I just don't know how to describe your services... They are extraordinary! I am quite happy
                    with them! Just keep up going this way!&#34;</q>
                </h4>
                <p>
                  <cite class="text-normal">&#8212; Amanda Cooper</cite>
                </p>
              </blockquote>
              <blockquote class="quote quote-variant-1"><img class="rounded-circle" alt=""
                  src="@/assets/images/index-20.jpg" width="97" height="97">
                <h4 class="offset-top-20">
                  <q>&#34;Thank you very much. I&#39;m impressed with your service. I&#39;ve already told my friends
                    about your company and your quick response, thanks again!&#34;</q>
                </h4>
                <p>
                  <cite class="text-normal">&#8212; Bernard Show</cite>
                </p>
              </blockquote>
            </div>
          </div>
        </div>
      </section>
      <section class="section-60">
        <div class="container text-left">
          <div class="row justify-content-center">
            <div class="col-lg-4">
              <h3 class="text-center text-md-left">New Products</h3>
              <hr class="divider divider-sm-left divider-base divider-bold">
              <div class="row offset-top-20 justify-content-start">
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-23.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Earrings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Agrafe earrings</a>
                      </div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-24.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Necklaces</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Amulette de Cartier
                          necklace</a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12 offset-md-top-312">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-25.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Brooches</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Cartier Fauna and
                          Flora brooch</a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 offset-top-45 offset-md-top-0">
              <h3 class="text-center text-md-left">On Sale</h3>
              <hr class="divider divider-sm-left divider-base divider-bold">
              <div class="row offset-top-20 justify-content-start">
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-26.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Rings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Engagement ring</a>
                      </div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89 <span
                            class='text-spacing-0 text-light text-muted text-strike small'>$278.96</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-27.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Earrings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">6-mm Round
                          Birthstone Stud Earrings </a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89 <span
                            class='text-spacing-0 text-light text-muted text-strike small'>$278.96</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12 offset-md-top-312">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-28.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Watches</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">High Jewelry watch
                          18K diamonds pearls onyx emeralds</a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89 <span
                            class='text-spacing-0 text-light text-muted text-strike small'>$278.96</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 offset-top-45 offset-md-top-0">
              <h3 class="text-center text-md-left">Top Rated Products</h3>
              <hr class="divider divider-sm-left divider-base divider-bold">
              <div class="row offset-top-20 justify-content-start">
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-29.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Rings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Amulette de Cartier
                          long necklace </a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-30.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Rings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">Floral Vine Teardrop
                          Natural Shell .925 Silver Earrings</a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12">
                  <div class="unit flex-row unit-spacing-21">
                    <div class="unit-left"><a href="single-product.html"><img alt="" src="@/assets/images/index-31.jpg"
                          width="100" height="100"></a></div>
                    <div class="unit-body">
                      <div class="p"><a href="category.html">Earrings</a></div>
                      <div class="big offset-top-4"><a class="text-base" href="single-product.html">6-mm Round
                          Birthstone Stud Earrings </a></div>
                      <div class="offset-top-4">
                        <div class="product-price">$258.89
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section-bottom-60">
        <div class="container">
          <div class="well">
            <h4>Get the latest news delivered daily!</h4>
            <p class="offset-top-10">We will send you breaking news right to your inbox</p>
            <!-- Rd Mailform result field-->
            <div class="rd-mailform-validate"></div>
            <!-- RD Mailform-->
            <form class="offset-top-10 form-inline-flex d-sm-flex rd-mailform" data-result-class="rd-mailform-validate"
              data-form-type="contact" method="post" action="bat/rd-mailform.php">
              <div class="form-wrap">
                <input class="form-input" type="text" name="email" data-constraints="@NotEmpty @Email"
                  placeholder="Enter your e-mail">
              </div>
              <button class="btn btn-primary offset-top-0" type="submit">Subscribe</button>
            </form>
          </div>
        </div>
      </section>
      <!-- Page Footer-->
      <footer class="page-footer section-60">
        <div class="container"><a class="brand" href="./"><img class="d-inline-block img-responsive" alt=""
              src="@/assets/images/logo.png" width="163" height="41"></a>
          <p>Our products are a combination of classic and modern style; we can satisfy any demands of customers, that
            is why we have so many fans. You will <br class='veil reveal-lg-block'> always be popular with our jewelry;
            the magical shine of our products will bring you the best of luck!</p>
          <ul class="elements-group-20 offset-top-20">
            <li><a class="icon icon-xs text-base fa-facebook" href="#"></a></li>
            <li><a class="icon icon-xs text-base fa-twitter" href="#"></a></li>
            <li><a class="icon icon-xs text-base fa-google-plus" href="#"></a></li>
            <li><a class="icon icon-xs text-base fa-linkedin" href="#"></a></li>
            <li><a class="icon icon-xs text-base fa-pinterest" href="#"></a></li>
          </ul>
          <p class="rights"><span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><span
              class="brand-name"><span class='font-weight-bold'>Turquoise</span></span><span>.&nbsp;</span><a
              href="privacy.html">Privacy Policy</a>. <a target="_blank" href="https://www.mobanwang.com/"
              title="网站模板">网站模板</a></p>
        </div>
      </footer>
    </div>
    <div class="snackbars" id="form-output-global"></div>
  </div>
</template>
<script src="../assets/js/core.min.js"/>
    <script src="../assets/js/script.js"/>

<script>

// import '../assets/js/script'
import "@/assets/css/fonts.css"; //@代表的是你的项目根路径
import "@/assets/css/style.css";
// import "@/assets/js/core.min.js"
// import "@/assets/js/script"

export default {
  data(){
    return{
      isActiveLeft:false
    }
  },
  methods:{
    ActiveLeft(){
      console.log("sfasf",this.isActiveLeft);
      
      this.isActiveLeft = !this.isActiveLeft
    }
  }
}
</script>

<style lang="scss" scoped></style>

<style></style>